const $ = require("jquery")
import 'animate.css';
require("bootstrap/dist/css/bootstrap.css")
$(function () {
    $(".search button").on("click",function () {
        const wd = $(".search input").val()
        $("#music-list tbody").html("")
        if (!wd){
            return false
        }
        //http://localhost:3000/search?keywords=%E6%B5%B7%E9%98%94%E5%A4%A9%E7%A9%BA
        $.ajax({
            url:`http://localhost:3000/search?keywords=${wd}`,
            success(res){
                const songs = res.result.songs
                songs.forEach(function (item,index) {
                    console.log(item)
                    const {name,id,artists} = item
                    const singers = artists.map((art)=>`<a href="./singer.html?id=${art.id}&name=${art.name}">${art.name}</a>`)
                    $(`<tr>
                        <th scope="row">${index+1}</th>
                        <td>${name}</td>
                        <td class="singer">${singers}</td>
                        <td><button data-id=${id}>播放</button></td>
                       </tr>
                    `).appendTo("#music-list tbody")
                })
            }
        })
    })
    let flag = false
    $("#music-list tbody").on("click","button",function () {
        const ID = $(this).data("id")
        const url = `https://music.163.com/song/media/outer/url?id=${ID}.mp3`
        $("#mp3").attr("src",url)
        if (!flag){
            $("#mp3")[0].play()
            $(this).text("播放ing...").parent().parent().siblings().find("button").text("播放")
            flag = true
        }else {
            $("#mp3")[0].pause()
            $(this).text("播放").parent().parent().siblings().find("button").text("播放")
            flag = false
        }
    })
})